<template>
	<div class="login-box login-main">
		<div>
			<!-- logo -->
			<div class="flex justify-center items-center pb-[10px] w-full">
				<img class="block w-[170px]" src="@/assets/images/login-logo.png" />
			</div>
		</div>
		<div class="box mt-[20px]">
			<div class="py-[20px] text-center text-[16px]">房主登录</div>
			<div class="mx-[15px]">
				<van-form @submit="onSubmit">
					<div class="bg-[#f3f3f3] flex justify-between rounded-[6px] overflow-hidden">
						<div class="grow-[1] w-0">
							<van-field v-model="ruleForm.username" placeholder="请输入账号" @blur="handleBlur">
								<template #left-icon>
									<div class="h-full flex items-center mr-[10px]">
										<svg-icon name="login-user"></svg-icon>
									</div>
								</template>
							</van-field>
						</div>
					</div>
					<div class="bg-[#f3f3f3] flex justify-between rounded-[6px] overflow-hidden mt-[15px]">
						<div class="grow-[1] w-0">
							<van-field v-model="ruleForm.password" type="password" placeholder="请输入密码">
								<template #left-icon>
									<div class="h-full flex items-center mr-[10px]">
										<svg-icon name="login-pass"></svg-icon>
									</div>
								</template>
							</van-field>
						</div>
					</div>
					<div class="bg-[#f3f3f3] flex justify-between rounded-[6px] overflow-hidden mt-[15px]"
						v-if="state.authType == 1">
						<div class="flex-1 w-0">
							<van-field class="!w-full" v-model="ruleForm.captcha" type="number" placeholder="请输入验证码">
								<template #left-icon>
									<div class="h-full flex items-center mr-[10px]">
										<svg-icon name="login-code"></svg-icon>
									</div>
								</template>
							</van-field>
						</div>
						<div class="!w-[100px] overflow-hidden">
							<img class="w-full" v-if="state.captchaImg" :src="state.captchaImg" @click="getCaptcha()" />
						</div>
					</div>
					<div class="bg-[#f3f3f3] flex justify-between rounded-[6px] overflow-hidden mt-[15px]"
						v-if="state.authType == 2">
						<div class="flex-1 w-0">
							<van-field class="!w-full" v-model="ruleForm.captcha" type="number" placeholder="请输入谷歌验证码">
								<template #left-icon>
									<div class="h-full flex items-center mr-[10px]">
										<svg-icon name="login-code"></svg-icon>
									</div>
								</template>
							</van-field>
						</div>
					</div>
					<div class="mt-[20px]">
						<van-button :disabled="state.loading" :loading="state.loading" :loading-text="state.loading ? '登录中...' : ''"
							block type="primary" native-type="submit">
							登 录
						</van-button>
					</div>
					<div class="mb-[20px] mt-[10px]">
						<van-button block type="default"> 返回玩家登录 </van-button>
					</div>
				</van-form>
			</div>
		</div>
	</div>
</template>
<route>
  {
    name: "login",
    meta: {
      pageIndex: 0,
    }
  }
</route>
<script setup lang="ts">
import { debounce } from "lodash-es";
import { reqAuthType, reqCaptcha, reqDomainList, reqLogin } from "@/api/login";

import { useUserStore } from "@/store/modules/user";
import { toast } from "@/utils/toast";
const userStore = useUserStore();
const router = useRouter();
const state = reactive({
	loading: false,
	captchaImg: "",
	captchaId: "",
	captchaing: false,
	authType: 1
});

const ruleForm = reactive({
	username: import.meta.env.PROD ? "" : "test1",
	password: import.meta.env.PROD ? "" : "123456",
	captcha: ""
});

const onSubmit = debounce(async () => {
	if (!ruleForm.username) {
		return toast.info("请输入账号");
	}
	if (!ruleForm.password) {
		return toast.info("请输入密码");
	}
	if (!ruleForm.captcha) {
		return toast.info("请输入验证码");
	}
	try {
		state.loading = true;
		const res = await reqLogin({
			Name: ruleForm.username,
			Password: ruleForm.password,
			Captcha: ruleForm.captcha,
			...(state.authType == 1 ? { CaptchaId: state.captchaId } : {})
		});

		state.loading = false;
		userStore.setToken(res.data.Token);
		userStore.setChatToken(res.data.ChatToken);
		userStore.setUserInfo(res.data.UserInfo);

		reqDomainList().then(res => {
			localStorage.setItem("domainList", JSON.stringify(res.data))
		});
		toast.success("登录成功");
		router.push({ path: "/" });
	} catch (error) {
		getCaptcha();
		handleBlur();
		state.loading = false;
		console.log(error);
	}
}, 500);

const handleBlur = async () => {
	try {
		if (!ruleForm.username) {
			return;
		}
		const res = await reqAuthType({
			Name: ruleForm.username
		});
		state.authType = res.data.AuthType;
		if (state.authType == 2) {
			ruleForm.captcha = "";
		}
	} catch (error) {
		console.log(error);
	}
};

// 获取验证码
const getCaptcha = async () => {
	try {
		ruleForm.captcha = "";
		state.captchaing = true;
		let res = await reqCaptcha();
		state.captchaing = false;
		if (res?.code == 200) {
			state.captchaImg = res.data.CaptchaImg;
			state.captchaId = res.data.CaptchaId;
			ruleForm.captcha = res.data.Answer;
		}
	} catch (error) {
		state.captchaing = false;
	}
};

onBeforeMount(() => {
	getCaptcha();
});
</script>
<style lang="scss" scoped>
.van-field {
	--van-cell-background: #f3f3f3;
}

.login-main {
	background-image: url("@/assets/images/login-bg.jpg");
	background-size: 100% 100%;
	background-position: center bottom;
}
</style>
<style scoped>
.login-box {
	@apply w-full h-full flex flex-col justify-center items-center bg-[#dcdbe0];
}

.box {
	@apply bg-[#fff] w-[90%] mx-auto rounded-[10px] text-center;
}
</style>
